<template>
  <a-card :body-style="{padding: '0px 0px'}" :bordered="false">
    <a-space class="operator">
      <a-button @click="back" type="primary">返回上一页</a-button>
    </a-space>
    <a-form-model ref="form" :model="form" :layout="layout" style="margin-top:24px" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-model-item label="选择商品" prop="product_name" >
        <a-select v-model="form.product_name" show-search :filter-option="filterOption">
          <a-select-option :value="item.name" v-for="(item,index) in productList" :key="index">
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="选择优化师" prop="admin_userid" >
        <a-select v-model="form.admin_userid">
          <a-select-option :value="item.id" v-for="(item,index) in youhuashi" :key="index" >
            {{item.username}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="btn_wrapperCol">
        <a-button type="primary" @click="onSubmit" :loading='loading'>
          提交
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import {getAllProductName,addProduct} from '@/api/dianshang/dianshang'
import {getOptimizerList} from '@/api/xinxiliu/account'

export default {
  name:'Add',
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
      btn_wrapperCol:{ span: 13, offset: 7 },
      layout:'horizontal', //'horizontal'|'vertical'
      youhuashi:[],
      productList:[],
      loading:false,
      form:{
        product_name:'',
        admin_userid:'',
      },
      rules:{
        product_name:[
          {required: true,message: '请选择商品', trigger: 'blur'}
        ],
        admin_userid:[
          {required: true,message: '请选择优化师', trigger: 'blur'}
        ]
      },
    }
  },
  created(){
    this.getAllProductList()
    this.getOptimizerList()
  },
  methods:{
    onSubmit(){
      const _this = this;
      this.$refs.form.validate((valid)=>{
        if(valid){
          let form = JSON.parse(JSON.stringify(this.form))
          this.loading = true;
          addProduct(form).then((res) => {
            this.loading = false;
            if(res.errcode == 0){
              _this.$message.success('添加成功')
              _this.back()
            }else{
              this.loading = false;
              _this.$message.error(res.errmsg)
            }
          }).catch(() => {
            this.loading = false;
          });
        }
      })
    },
    getAllProductList(){
      getAllProductName({}).then((res) => {
        if(res.errcode == 0){
          //
          this.productList = res.data
        }
      }).catch(() => {
        
      });
    },
    getOptimizerList(){
      // 获取优化师列表
      getOptimizerList({}).then((res) => {
        if(res.errcode == 0){
          this.youhuashi = res.data
        }
      });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    back(){
      this.$emit('update:mod','normal')
    },
  }
}
</script>